그래픽 사용자 인터페이스

3. 구성 요소

GUI의 시각적 구성과 시간적 동작 설계는 소프트웨어 응용 프로그램 프로그래밍에서 인간-컴퓨터 상호 작용 영역의 중요한 부분이다. GUI 설계의 목표는 저장된 프로그램의 기본 논리 설계에 대한 효율성과 사용 편의성을 향상시키는 것이며, 이러한 설계 분야는 ''사용성''이라고 한다. 사용자 중심 설계 방법을 사용하여 설계에 도입된 시각 언어가 작업에 적합하도록 한다.

응용 프로그램의 시각적 그래픽 인터페이스 기능은 때때로 "크롬(chrome)" 또는 "GUI"라고 불린다.^[12][13][14] 일반적으로 사용자는 보유한 데이터의 종류에 적합한 상호 작용을 허용하는 시각적 위젯을 조작하여 정보와 상호 작용한다. 잘 설계된 인터페이스의 위젯은 사용자의 목표를 달성하는 데 필요한 작업을 지원하도록 선택된다. 모델-뷰-컨트롤러는 인터페이스가 응용 프로그램 기능과 독립적이고 간접적으로 연결되어 GUI를 쉽게 사용자 지정할 수 있는 유연한 구조를 허용한다. 이를 통해 사용자는 원하는 대로 다른 "스킨" 또는 "테마"를 선택하거나 디자인할 수 있으며, 사용자 요구 사항이 변화함에 따라 디자이너가 인터페이스를 변경하는 작업을 용이하게 한다. 좋은 GUI 디자인은 시스템 아키텍처보다 사용자와 더 관련이 있다.

창과 같은 큰 위젯은 주로 웹 페이지, 이메일 메시지 또는 그림과 같은 주요 프레젠테이션 콘텐츠에 대한 프레임이나 컨테이너를 제공한다. 작은 위젯은 일반적으로 사용자 입력 도구 역할을 한다.

GUI는 현금 자동 입출금기(ATM), 레스토랑의 판매 시점(POS) 터치스크린,^[15] 소매점의 셀프 서비스 체크아웃, 항공사 셀프 티켓 및 체크인, 기차역이나 박물관과 같은 공공 장소의 정보 키오스크, 실시간 운영 체제(RTOS)를 사용하는 임베디드 산업 응용 프로그램의 모니터 또는 제어 화면과 같이 특정 수직 시장의 요구 사항에 맞게 설계될 수 있다.

휴대폰과 휴대용 게임 시스템도 응용 프로그램별 터치스크린 GUI를 사용한다. 최신 자동차는 내비게이션 시스템과 멀티미디어 센터 또는 내비게이션 멀티미디어 센터 조합에 GUI를 사용한다.

3. 1. 기본 요소

3. 2. 기타 요소

4. 상호 작용

GUI의 시각적 구성과 시간적 동작을 설계하는 것은 소프트웨어 응용 프로그램 프로그래밍에서 인간-컴퓨터 상호 작용 영역의 중요한 부분이다. 그 목표는 저장된 프로그램의 기본 논리 설계에 대한 효율성과 사용 편의성을 향상시키는 것이며, 이러한 설계 분야는 ''사용성''이라고 한다. 사용자 중심 설계 방법을 사용하여 설계에 도입된 시각 언어가 작업에 적합하도록 한다.

응용 프로그램의 시각적 그래픽 인터페이스 기능은 때때로 "크롬(chrome)" 또는 "GUI"라고 불린다.^[12][13][14] 일반적으로 사용자는 보유한 데이터의 종류에 적합한 상호 작용을 허용하는 시각적 위젯을 조작하여 정보와 상호 작용한다. 잘 설계된 인터페이스의 위젯은 사용자의 목표를 달성하는 데 필요한 작업을 지원하도록 선택된다. 모델-뷰-컨트롤러는 인터페이스가 응용 프로그램 기능과 독립적이고 간접적으로 연결되어 GUI를 쉽게 사용자 지정할 수 있는 유연한 구조를 허용한다. 이를 통해 사용자는 원하는 대로 다른 "스킨" 또는 "테마"를 선택하거나 디자인할 수 있으며, 사용자 요구 사항이 변화함에 따라 디자이너가 인터페이스를 변경하는 작업을 용이하게 한다. 좋은 GUI 디자인은 시스템 아키텍처보다 사용자와 더 관련이 있다.

창과 같은 큰 위젯은 일반적으로 웹 페이지, 이메일 메시지 또는 그림과 같은 주요 프레젠테이션 콘텐츠에 대한 프레임이나 컨테이너를 제공한다. 작은 위젯은 일반적으로 사용자 입력 도구 역할을 한다.

GUI는 현금 자동 입출금기(ATM), 레스토랑의 판매 시점(POS) 터치스크린,^[15] 소매점의 셀프 서비스 체크아웃, 항공사 셀프 티켓 및 체크인, 기차역이나 박물관과 같은 공공 장소의 정보 키오스크, 실시간 운영 체제(RTOS)를 사용하는 임베디드 산업 응용 프로그램의 모니터 또는 제어 화면과 같이 응용 프로그램별 GUI로 수직 시장의 요구 사항에 맞게 설계될 수 있다.

휴대폰과 휴대용 게임 시스템도 응용 프로그램별 터치스크린 GUI를 사용한다. 최신 자동차는 내비게이션 시스템과 멀티미디어 센터 또는 내비게이션 멀티미디어 센터 조합에 GUI를 사용한다.

또한 GUI에 영향을 미치는 프로그램에 의해 수행되는 작업도 있다. 예를 들어, 컴퓨터 프로그램 간의 통신을 용이하게 하기 위한 inotify 또는 D-Bus와 같은 구성 요소가 있다.

4. 1. 포인팅 장치

4. 2. 키보드

5. Post-WIMP 인터페이스

개인용 디지털 보조 장치(PDA)나 스마트폰과 같은 소형 모바일 기기는 공간 및 사용 가능한 입력 장치의 제약 때문에 다양한 통합적 은유를 사용하여 일반적으로 WIMP 요소를 사용한다. WIMP에 적합하지 않은 애플리케이션은 집합적으로 ''포스트 윔프'' UI라고 불리는 새로운 상호 작용 기법을 사용할 수 있다.^[18]

2011년을 기준으로 애플 iOS(아이폰) 및 안드로이드와 같은 일부 터치스크린 기반 운영 체제는 포스트 윔프로 분류되는 GUI를 사용한다. 이러한 운영 체제는 디스플레이에 두 개 이상의 손가락을 접촉하여 사용하는 상호 작용 방식을 지원하며, 이를 통해 한 개의 포인터와 마우스로는 지원되지 않는 핀치 및 회전과 같은 동작이 가능하다.^[19]

6. GUI와 다른 인터페이스

그래픽 사용자 인터페이스(GUI)의 개념은 1960년대에 이반 서덜랜드가 1963년에 개발한 스케치패드를 통해 제안되었다. 스케치패드는 컴퓨터 지원 설계(CAD) 소프트웨어의 시초이자 최초로 완전한 그래픽 사용자 인터페이스를 구현한 것이었다. 비슷한 시기에 더글라스 엥겔바트를 비롯한 SRI 인터내셔널의 연구자들은 하이퍼링크를 기반으로 마우스를 사용하는 NLS(On-line System)를 개발하였다.

제록스 파크는 NLS의 하이퍼링크 개념을 그래픽으로 확장하였으며, 1973년에 개발된 제록스 알토 컴퓨터는 그래픽 사용자 인터페이스를 사용하는 최초의 컴퓨터가 되었다. 현재 대부분의 그래픽 사용자 인터페이스는 기본적으로 이 인터페이스에서 유래했으며, 어떤 사람들은 이들을 ‘파크 사용자 인터페이스(PUI)’라고 부르기도 한다. 파크 사용자 인터페이스는 윈도, 메뉴, 아이콘, 라디오 단추, 체크 상자 등의 그래픽 요소들을 사용하며, 마우스와 같은 포인팅 장치를 키보드와 함께 사용한다.

이후 애플 컴퓨터는 제록스 파크에서 만든 이러한 그래픽 사용자 인터페이스를 보고 당시 비상장이었던 애플의 주식 100만달러 어치를 지불하고 기본적인 기술을 전수받았다. 1983년 그래픽 사용자 인터페이스에 기반한 컴퓨터 리사(LISA)를 출시했지만 값이 너무 비싼 탓에 실패하였다. 그러나 이후 1984년에 나온 애플의 매킨토시는 상업적인 성공을 이뤘다. 한편 매킨토시가 이러한 성공을 거두자 마이크로소프트사는 마이크로소프트 윈도우를 개발하였다. 이는 매킨토시의 아이디어를 다시 모방한 것이었으며 이후 법정소송을 거치기도 하였다. 1995년 마이크로소프트사가 윈도우 95를 출시하여 성공을 거둠으로써 본격적인 그래픽 사용자 인터페이스의 대중화를 이루었다. 한편 CUI(character user interface, 명령 줄 인터페이스) OS인 유닉스(UNIX)와 그 계열의 리눅스에서는, X 윈도 시스템을 통해 그래픽 사용자 인터페이스를 구현하고 있다.

대화 상자가 시스템에 깊이 묻혀 있거나 재설계 중에 다른 위치로 이동하는 경우 GUI를 매우 어렵게 만들 수 있다. 또한 아이콘과 대화 상자는 일반적으로 사용자가 스크립팅하기가 더 어렵다.

6. 1. 명령 줄 인터페이스 (CLI)

7. GUI 래퍼

GUI 래퍼는 주로 리눅스 및 유닉스 계열 소프트웨어 응용 프로그램에서, 텍스트 기반 UI 또는 명령줄 인터페이스(CLI) 버전을 우회하는 방법을 제공한다. 명령줄 또는 텍스트 기반 응용 프로그램을 사용하면 사용자가 프로그램을 대화형이 아닌 방식으로 실행할 수 있지만, 그 위에 있는 GUI 래퍼는 키보드에 명령어를 입력해야 하는 명령줄의 가파른 학습 곡선을 피할 수 있게 해준다. GUI 래퍼를 시작하면 사용자는 그래픽 아이콘과 데스크톱 환경의 시각적 표시기를 통해 직관적으로 상호 작용하고, 시작, 중지, 작업 매개변수 변경을 수행할 수 있다. 응용 프로그램은 두 인터페이스를 모두 제공할 수도 있으며, 그럴 경우 GUI는 일반적으로 명령줄 버전을 둘러싼 WIMP 래퍼이다. 이는 특히 유닉스 계열 운영 체제용으로 설계된 응용 프로그램에서 일반적인데, 개발자가 아이콘 디자인 및 버튼 배치와 같은 인터페이스 세부 사항에 신경 쓰지 않고 제품 기능에만 집중할 수 있도록 했기 때문에 명령줄 인터페이스가 먼저 구현되었다. 이러한 방식으로 프로그램을 설계하면 사용자가 프로그램을 셸 스크립트에서 실행할 수도 있다.

8. 3차원 그래픽 사용자 인터페이스 (3D GUI)

많은 환경과 게임은 3D 그래픽 기법을 사용하여 3차원 GUI 객체를 화면에 투영한다. 3D 그래픽의 사용은 주요 운영 체제(예: Windows Aero, Aqua(macOS))에서 매력적인 인터페이스(예: 창 아래에 있는 그림자 효과와 커서 사용 등의 "눈요깃거리" 포함)를 만들거나, 3차원에서만 가능한 기능적 목적을 위해 점점 더 일반화되고 있다. 예를 들어, 사용자 전환은 각 사용자의 작업 공간을 나타내는 면을 가진 정육면체를 회전하여 표현하고, 창 관리 기능은 Windows Vista에서 로덱스 스타일의 뒤집기 메커니즘을 통해 표현된다(Windows Flip 3D 참조). 두 경우 모두 운영 체제는 해당 창의 내용을 계속 업데이트하면서 동적으로 창을 변환한다.^[40][41]

GUI는 일반적으로 WIMP 기반이지만, Microsoft Bob, 3dwm, 파일 시스템 탐색기, 파일 시스템 시각화, 3D 우편함, 및 GopherVR에서 사용되는 것과 같은 다른 메타포가 등장하기도 한다. 확대/축소(ZUI)는 방향 문제 및 숨겨진 개체의 사용성 단점 없이 3D 환경의 표현 이점을 제공할 것을 약속하는 관련 기술이다. 2006년, 힐크레스트 랩스는 최초의 TV용 ZUI를 선보였다.^[42] 다른 혁신적인 사례로는 플레이스테이션 2의 메뉴, Xbox의 메뉴, Sun의 프로젝트 룩킹 글래스, 프로젝트 룩킹 글래스와 유사한 메티스,^[43] 사용자가 마치 실제 문서인 것처럼 사실적인 움직임과 물리 법칙을 사용하여 문서와 창을 조작할 수 있는 BumpTop, 공동 작업을 위해 구축된 Croquet OS,^[44] 그리고 Enlightenment 및 Compiz와 같은 합성 윈도우 매니저 등이 있다. 증강 현실과 가상 현실도 3D GUI 요소를 사용한다.^[45]

9. 구현

GUI의 시각적 구성과 시간적 동작을 설계하는 것은 소프트웨어 응용 프로그램 프로그래밍에서 인간-컴퓨터 상호 작용 영역의 중요한 부분이다. 그 목표는 저장된 프로그램의 기본 논리 설계에 대한 효율성과 사용 편의성을 향상시키는 것으로, 이러한 설계 분야는 ''사용성''이라고 한다. 사용자 중심 설계 방법을 사용하여 설계에 도입된 시각 언어가 작업에 적합하도록 한다.

응용 프로그램의 시각적 그래픽 인터페이스 기능은 때때로 "크롬(chrome)" 또는 "GUI"라고 한다.^[12][13][14] 일반적으로 사용자는 보유한 데이터의 종류에 적합한 상호 작용을 허용하는 시각적 위젯을 조작하여 정보와 상호 작용한다. 잘 설계된 인터페이스의 위젯은 사용자의 목표를 달성하는 데 필요한 작업을 지원하도록 선택된다. 모델-뷰-컨트롤러는 인터페이스가 응용 프로그램 기능과 독립적이고 간접적으로 연결되어 GUI를 쉽게 사용자 지정할 수 있는 유연한 구조를 허용한다. 이를 통해 사용자는 원하는 대로 다른 "스킨" 또는 "테마"를 선택하거나 디자인할 수 있으며, 사용자 요구 사항이 변화함에 따라 디자이너가 인터페이스를 변경하는 작업을 용이하게 한다. 좋은 GUI 디자인은 시스템 아키텍처보다 사용자와 더 관련이 있다.

창과 같은 큰 위젯은 일반적으로 웹 페이지, 이메일 메시지 또는 그림과 같은 주요 프레젠테이션 콘텐츠에 대한 프레임이나 컨테이너를 제공한다. 작은 위젯은 일반적으로 사용자 입력 도구 역할을 한다.

GUI는 현금 자동 입출금기(ATM), 레스토랑의 판매 시점(POS) 터치스크린,^[15] 소매점에서 사용되는 셀프 서비스 체크아웃, 항공사 셀프 티켓 및 체크인, 기차역이나 박물관과 같은 공공 장소의 정보 키오스크, 실시간 운영 체제(RTOS)를 사용하는 임베디드 산업 응용 프로그램의 모니터 또는 제어 화면과 같이 응용 프로그램별 GUI와 같이 수직 시장의 요구 사항에 맞게 설계될 수 있다.

휴대폰과 휴대용 게임 시스템도 응용 프로그램별 터치스크린 GUI를 사용한다. 최신 자동차는 내비게이션 시스템과 멀티미디어 센터 또는 내비게이션 멀티미디어 센터 조합에 GUI를 사용한다.

GUI는 다양한 방법과 라이브러리를 사용하여 생성된다. 사용자에게 보여지는 시각적 요소는 종종 뷰(View)라고 불리며, 사용자 입력을 처리하는 내부 요소는 종종 컨트롤러(Controller)라고 불린다.

9. 1. 선언적 UI

• 웹
• * 리액트(React)^[50]
• * 앵귤러(Angular)^[51]
• * 뷰.js(Vue.js)^[52]
• macOS, iOS
• * 스위프트UI(SwiftUI)^[53]
• 안드로이드
• * 리액트 네이티브(React Native)^[54] (iOS 포함)
• 멀티 플랫폼
• * 플러터(Flutter)^[55] (멀티 플랫폼)

9. 2. 데이터 바인딩

참조

_[1] 서적 Longman Pronunciation Dictionary Pearson Longman
_[2] 웹사이트 How to pronounce GUI in English https://dictionary.c[...] 2020-04-03
_[3] 웹사이트 GUI 2024-12-07
_[4] 웹사이트 Command line vs. GUI https://www.computer[...] 2020-04-03
_[5] 웹사이트 The GUI versus the Command Line: Which is better? (Part 1) https://learn.micros[...] 2024-01-30
_[6] 웹사이트 The GUI versus the Command Line: Which is better? (Part 2) https://learn.micros[...] 2024-01-30
_[7] 웹사이트 Graphical user interface https://www.scienced[...] 2019-05-09
_[8] 웹사이트 Graphical User Interface (GUI) https://www.britanni[...] 2019-06-12
_[9] 백과사전 GUI https://www.pcmag.co[...] 2019-06-12
_[10] 웹사이트 Off with Their HUDs!: Rethinking the Heads-Up Display in Console Game Design https://web.archive.[...] 2006-02-14
_[11] 웹사이트 GUI definition http://www.linfo.org[...] 2004-10-01
_[12] 웹사이트 chrome http://www.catb.org/[...] 2020-04-03
_[13] 웹사이트 Browser and GUI Chrome https://web.archive.[...] 2012-01-29
_[14] 학술지 Graphical user interfaces: Graphical user interfaces https://onlinelibrar[...] 2011-02-23
_[15] 웹사이트 The ViewTouch restaurant system http://www.atarimaga[...]
_[16] 웹사이트 What is a graphical user interface (GUI)? https://www.ionos.co[...] 2020-09-14
_[17] 웹사이트 Mobile UX Design: List View and Grid View https://uxplanet.org[...] 2020-05-30
_[18] 학술지 Beyond WIMP https://doi.org/10.1[...]
_[19] 웹사이트 Reality-Based Interaction: A Framework for Post-WIMP Interfaces https://www.cs.tufts[...]
_[20] 웹사이트 A Creative Programming Environment, Remixed http://citeseerx.ist[...]
_[21] 웹사이트 Aesthetics and Art in the Early Development of Human-Computer Interfaces https://web.archive.[...] 2020-10-01
_[22] 서적 Pygmalion: A Creative Programming Environment https://books.google[...]
_[23] 웹사이트 The first GUIs http://www.catb.org/[...]
_[24] Youtube Xerox Star user interface demonstration, 1982 https://www.youtube.[...]
_[25] 웹사이트 VisiCorp Visi On http://toastytech.co[...]
_[26] 서적 A Windows Retrospective, PC Magazine Jan 2009 https://books.google[...] Ziff Davis 2009-01-01
_[27] 웹사이트 Magic Desk I for Commodore 64 http://toastytech.co[...]
_[28] 뉴스 Value of Windowing is Questioned https://www.nytimes.[...] 1984-12-25
_[29] 웹사이트 Apple's 1984: The Introduction of the Macintosh in the Cultural History of Personal Computers https://web.archive.[...] 1997-10-01
_[30] 서적 Electric Dreams: Computers in American Culture New York University Press 2011-10-06
_[31] 웹사이트 Review of ''Pirates of Silicon Valley'' Movie https://web.archive.[...] DotJournal.com 2014-01-24
_[32] 뉴스 With Windows 95's Debut, Microsoft Scales Heights of Hype https://www.washingt[...] 1995-08-24
_[33] 웹사이트 Computers Timeline of Computer History Computer History Museum http://www.computerh[...] 2017-04-02
_[34] 간행물 iMania https://web.archive.[...] 2007-02-19
_[35] 웹사이트 The iPad/tablet PC market defined? https://web.archive.[...]
_[36] 웹사이트 Ballmer (and Microsoft) still doesn't get the iPad https://arstechnica.[...] 2010
_[37] 잡지 The iPad's victory in defining the tablet: What it means http://www.infoworld[...] 2011-07-05
_[38] 학술지 Chapter 2: Mobile Devices in 2011 https://journals.ala[...] 2011-03-17
_[39] 웹사이트 What is a Graphical User Interface? Definition and FAQs https://www.omnisci.[...] 2022-01-26
_[40] 웹사이트 3D Mailbox – 3-Dimensional Email Software. Bring e-mail to life! Email just got cool and fun. http://www.3dmailbox[...] 2022-07-14
_[41] 웹사이트 3D Mailbox https://download.cne[...] 2022-07-14
_[42] 웹사이트 CES Unveiled@NY ‘07: Point and click coming to set-top boxes? http://gadgets.macwo[...] 2006-11-11
_[43] 웹사이트 Metisse – New Looking Glass Alternative https://developers.s[...] 2004-06-29
_[44] 웹사이트 Croquet – A Collaboration System Architecture http://www.croquetco[...] 2022-09-17
_[45] 웹사이트 Designing User Experience for Virtual Reality (VR) applications https://uxplanet.org[...] 2022-05-06
_[46] 웹사이트 Object-Oriented GUIs are the Future http://openmct.blogs[...] 2012-08-23
_[47] 웹사이트 GUI https://www.sophia-i[...] 2020-07-11
_[48] 웹사이트 エンゲルバートによる1968年のプレゼンテーションの一部。レポートや論文をどのようにして共同作成・編集・完成・閲覧・出力させるかのデモ。 http://vodreal.stanf[...]
_[49] 웹사이트 THE EARLY HISTORY OF SMALLTALK http://www.metaobjec[...]
_[50] 웹사이트 宣言的な View https://ja.reactjs.o[...] 2019-11-08
_[51] 웹사이트 シンプルで宣言的なテンプレートを使用して素早く機能を構築します https://angular.jp/ 2019-11-08
_[52] 웹사이트 Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM に描画することを可能にするシステムです https://jp.vuejs.org[...]
_[53] 웹사이트 宣言型シンタックス. SwiftUIは宣言型シンタックスを使用しているため、ユーザーインターフェイスの動作をシンプルに記述することができます。 https://developer.ap[...]
_[54] 웹사이트 React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. https://facebook.git[...]
_[55] 웹사이트 declarative style used by Flutter https://flutter.dev/[...]
_[56] 웹사이트 http://www.computerh[...]
_[57] 웹인용 Technet.com http://blogs.technet[...] 2018-05-21
_[58] 웹인용 Technet.com http://blogs.technet[...] 2018-05-21
_[59] 웹인용 window manager Definition https://www.pcmag.co[...] Ziff Davis Publishing Holdings Inc. 2008-11-12